<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>用户列表</title>
    <link href="/layui/css/layui.css" rel="stylesheet"/>
    <link href="/framework/css/console.css" rel="stylesheet"/>
    <link href="/framework/css/animate.css" rel="stylesheet"/>
    <link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <!--[if lt IE 9]>
    <script src="/jquery/jquery-1.9.1.min.js"></script>
    <![endif]-->
    <!--[if gte IE 9]><!-->
    <script src="/jquery/jquery.min.js"></script>
    <!--<![endif]-->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="/layui/layui.js"></script>
    <script src="/framework/js/global.js"></script>
</head>
<body>
<div class="panel animated fadeIn">
    <div class="panel-body">
        <div id="toolbar" class="elight-table-toolbar">
            <div class="layui-btn-group"></div>
            <button id="btnSearch" class="toolbar-search-button layui-btn layui-btn-normal layui-btn-small">
                <i class="layui-icon">&#xe615;</i>
            </button>
            <div class="toolbar-search-input">
                <input type="text" id="keyWord" placeholder="用户账号或姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <table id="gridList" class="layui-form layui-table table-hover elight-table" lay-skin="line">
            <thead>
            <tr>
                <th>
                    <input type="checkbox" lay-skin="primary"></th>
                <th>账号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>手机</th>
                <th>部门</th>
                <th>状态</th>
            </tr>
            </thead>
            <!--内容容器-->
            <tbody id="content"></tbody>
        </table>
        <div id="paged"></div>
    </div>
</div>
</body>
</html>

<!--内容模板-->
<script id="contentTpl" type="text/html">
    {{#  layui.each(d.list, function(index, item){ }}
    <tr>
        <td>
            <input type="checkbox" lay-skin="primary" value="{{item.id}}"></td>
        <td>{{item.account}}</td>
        <td>{{item.realName}}</td>
        <td>{{# if(item.gender==true){ }} 男
            {{# }else{ }} 女
            {{# } }}
        </td>
        <td>{{item.mobilePhone}}</td>
        <td>{{item.deptName}}</td>
        <td>{{# if(item.isEnabled==true){ }} <span class="label label-success label-sm">启用</span>
            {{# }else{ }} <span class="label label-dark label-sm">禁用</span>
            {{# } }}
        </td>
    </tr>
    {{#  }); }}
    {{# if(d.list.length<=0) { }}
    <tr style="color: red">
        <td colspan="8">查无数据。</td>
    </tr>
    {{# } }}
</script>

<script type="text/javascript">
    var paging;
    console.log(parent._baseUrl);
    layui.config({
        base: parent._baseUrl
    }).use(['paging', 'form', 'layer'], function () {
        var layer = parent.layer || layui.layer;
        var form = layui.form;
        paging = layui.paging();
        initGrid();
        $("#toolbar").authorizeButton();
        $('#btnSearch').click(initGrid);
        $('#keyWord').bindEnterEvent(initGrid);
    });

    function initGrid() {
        paging.init({
            url: '/system/user/index',
            elem: '#content',
            tempElem: '#contentTpl',
            params: {
                keyWord: $("#keyWord").val()
            },
            pageConfig: {
                elem: 'paged',
                pageSize: 10,
            },
            success: function () {

            }
        });
    }

    function btn_add() {
        $.layerOpen({
            id: "add",
            title: "新增用户",
            width: "670px",
            height: "530px",
            content: "/system/user/form",
            yes: function (iBody) {
                iBody.find('#btnSubmit').click();
                initGrid();
            }
        });
    }

    function btn_edit() {
        var ids = $("#gridList").gridSelectedRowValue();
        if (ids.length != 1) {
            $.layerMsg("请勾选单条记录修改。", "warning");
            return;
        }
        $.layerOpen({
            id: "edit",
            title: "修改用户",
            width: "670px",
            height: "530px",
            content: "/system/user/form?primaryKey=" + ids[0],
            yes: function (iBody) {
                iBody.find('#btnSubmit').click();
                initGrid();
            }
        });
    }

    function btn_delete() {
        var ids = $("#gridList").gridSelectedRowValue();
        if (ids.length < 1) {
            $.layerMsg("请勾选需要删除的用户。", "warning");
            return;
        }
        $.layerConfirm({
            content: "您已选中" + ids.length + "条数据, 确定删除吗？",
            callback: function () {
                $.formSubmit({
                    url: '/system/user/delete',
                    data: {userIds: ids.join()},
                    success: function () {
                        initGrid();
                    }
                });
            }
        });
    }

    function btn_detail() {
        var ids = $("#gridList").gridSelectedRowValue();
        if (ids.length != 1) {
            $.layerMsg("请勾选单条记录查看。", "warning");
            return;
        }
        $.layerOpen({
            id: "detail",
            title: "查看用户",
            width: "670px",
            height: "530px",
            content: "/system/user/detail?primaryKey=" + ids[0],
            btn: null
        });
    }

</script>
